<template>
  <div class="contain">
    <div class="Blocks">作者--{{authorname}}</div>
    <div v-if="dataList.length>0">
      <div v-for="(item,index) in dataList" :key="index" class="title" @click="toPoem(item.id)">
        <div class="textL">{{item.title}}</div>
        <div class="textR">{{item.c}}...</div>
      </div>
    </div>
    <div class="poemsNull" v-else>
      竟然没有诗作！！！
      <br />这不科学！！！
      <br />(┬_┬)
    </div>

    <!-- 下面是跳转到顶部，因为遮挡banner，暂时取消 -->
    <div class="goTop" @click="goTop" v-if="btnFlag">
      <img src="/static/images/top.png" alt />
    </div>
    <lastPage v-if="dataList.length>0" :last="{length: dataList.length, lastPage: lastPage}"></lastPage>
  </div>
</template>

<script>
import { navto } from "@/utils/util";
import { toast } from "@/utils/index";
import { getPoemsByAuthor, getPoetryByAuthor } from "@/api/api";
import lastPage from "@/components/lastPage";
export default {
  data() {
    return {
      st: 1,
      id: 0, //作者id
      authorname: "", //作者名称
      totalPage: 1, //总计页面
      lastPage: false, //是否显示加载中
      page: 1, //当前第几页
      limit: 15, //一页展示多少条数据
      dataList: [] //数据存储地方
    };
  },
  onLoad(e) {
    this.id = 0;
    this.totalPage = 1; //总计页面
    this.lastPage = false; //是否显示加载中
    this.page = 1; //当前第几页
    this.authorname = "";
    this.id = e.id;
    this.st = e.st;
    this.authorname = decodeURIComponent(e.authorname);
  },
  onShow() {
    let token = mpvue.getStorageSync("token") || "";
    if (token) {
      this.dataList = [];
      this.getDataList();
    } else {
      this.getToken();
    }
  },
  //触及底部
  onReachBottom(e) {
    let that = this;
    that.loadMore();
  },
  components: {
    lastPage
  },
  methods: {
    //回到顶部
    goTop() {
      let that = this;
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 0
        });
      } else {
        wx.showModal({
          title: "提示",
          content:
            "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
        });
      }
    },
    getToken() {
      // 跳转回授权页面
      navto("/pages/authorization/main", "");
    },
    // 上拉加载更多
    loadMore(e) {
      if (this.totalPage - this.page <= 0) {
        return;
      } else {
        this.page++;
        this.getDataList();
      }
    },
    getDataList() {
      let data = {
        page: this.page,
        limit: this.limit,
        id: this.id
      };
      wx.showLoading({
        title: "加载中"
      });
      if (this.st == 1) {
        getPoemsByAuthor(data).then(res => {
          this.detailData(res);
        });
      } else if (this.st == 2) {
        getPoetryByAuthor(data).then(res => {
          this.detailData(res);
        });
      }
    },
    /**
     * 跳转具体某一首诗词
     */
    toPoem(id) {
      if (id) {
        let st = this.st;
        navto("/pages/poem/main", { id: id, st: st });
      } else {
        toast("sorry,Its error!");
      }
    },
    /**
     * 处理数据
     */
    detailData(res) {
      if (res.data) {
        setTimeout(function() {
          wx.hideLoading();
        }, 200);
        let data = res.data.list.map(r => {
          r.c = r.content.substring(0, 12);
          return r;
        });
        this.dataList = this.dataList.concat(data);
        this.page = res.data.currPage;
        this.totalPage = res.data.totalPage;
      }
      if (this.totalPage - this.page <= 0) {
        //最后一页
        this.lastPage = true;
      } else {
        this.lastPage = false;
      }
    }
  }
};
</script>

<style lang='less' scope>
.contain {
  width: 90%;
  margin: 0rpx auto;
  margin-top: 25rpx;
  box-sizing: border-box;
  background-color: #fff;
  .goTop {
    width: 144rpx;
    height: 144rpx;
    position: fixed;
    right: 50rpx;
    bottom: 20rpx;
    z-index: 10;
    img {
      width: 50%;
      height: 50%;
    }
  }
  .Blocks {
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    padding-left: 22rpx;
    border-left: 8rpx solid rgb(173, 46, 46);
    color: rgb(173, 46, 46);
  }
  .poemsNull {
    font-size: 48rpx;
    text-align: center;
    padding-top: 250rpx;
    line-height: 3em;
  }
  .title {
    margin-top: 18rpx;
    margin-bottom: 38rpx;
    padding: 18rpx 18rpx;
    display: flex;

    font-weight: 500;
    border-radius: 25rpx;
    .textL {
      flex: 1;
      text-align: left;
      font-size: 32rpx;
    }
    .textR {
      flex: 2;
      text-align: right;
      font-size: 26rpx;
    }
  }
}
</style>
